<template>
	<view>
		<view class="pageTitle">
			更换手机号
		</view>
		<view class="loginBlock">
			<!-- <u-field icon="https://supply.zhongyimotor.com/upload/applet/phone@2x.png" v-model="oldPhone"
				@input="oldPhoneChange" placeholder="请输入旧手机号" :error-message="errorMessageOPhone"></u-field> -->
			<u-field icon="https://supply.zhongyimotor.com/upload/applet/phone@2x.png" v-model="newPhone"
				@input="newPhoneChange" placeholder="请输入新手机号" :error-message="errorMessageNPhone"></u-field>
			<u-field v-model="verify" icon="https://supply.zhongyimotor.com/upload/applet/verifyCode@2x.png"
				@input="verifyChange" type="number" placeholder="请输入验证码" :error-message="errorMessageVerify">
				<view :class='time == 0?"getVerify blue":"getVerify"' slot="right" @click="getVerify">
					{{time == 0?"获取验证码":time+"s"}}
				</view>
			</u-field>

			<u-button type="success" shape="circle" :custom-style="buttonStyle" @click="resetPhone">确认更改</u-button>
		</view>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import {
		buttonStyle
	} from "@/utils/buttonStyle.js";
	export default {
		data() {
			return {
				oldPhone: "",
				newPhone: "",
				errorMessageOPhone: "",
				errorMessageNPhone: "",
				errorMessageVerify: "",
				verify: "",
				time: 0,
				timer: "",
				canVerify: true,
				buttonStyle
			}
		},
		onShow() {

		},
		methods: {
			cutDown() {
				this.time--
				if (this.time == 0) {
					this.canVerify = true
					clearInterval(this.timer)
				}
			},
			getVerify() {
				let that = this
				if (!that.canVerify) {
					return false
				}
				if (that.newPhone == "") {
					that.errorMessagePhone = "请输入您的手机号";
					return;
				}
				that.canVerify = false
				let params = {
					mobile: that.newPhone,
					lang: ""
				}
				that.$api.getVerify(params).then((res) => {
					if (res.resultCode == 0) {
						that.time = 90
						that.timer = setInterval(that.cutDown, 1000)
						uni.showToast({
							title: '验证码已发送',
							icon: "none"
						})
					} else {
						that.canVerify = true
					}
				})
			},
			verifyChange(e) {
				if (e != "") {
					this.errorMessageVerify = ""
				}
			},
			oldPhoneChange(e) {
				if (e != "") {
					this.errorMessageOPhone = ""
				}
			},
			newPhoneChange(e) {
				if (e != "") {
					this.errorMessageNPhone = ""
				}
			},

			resetPhone() {
				let that = this
				if (that.newPhone == "") {
					that.errorMessageNPhone = "请输入您的手机号";
					return;
				}

				if (that.verify == "") {
					that.errorMessageVerify = "请输入短信验证码";
					return;
				}
				let params = {
					mobile: that.newPhone,
					code: that.verify,
				}
				that.$api.changePhone(params).then((res) => {
					uni.showToast({
						title: '修改成功',
						icon: "none",
						duration: 2000,
						success: () => {

							setTimeout(function() {
								uni.setStorage({
									key: 'userPhone',
									data: that.newPhone,
									success: () => {
										uni.redirectTo({
											url: '/pages/setting/index'
										})
									}
								})
							}, 2000)
						}
					})
				})
			}
		}
	};
</script>

<style scoped lang="less">
	.loginBlock {
		width: 630rpx;
		margin: 0 auto;

		/deep/.u-field {
			margin-top: 10rpx;
			padding: 20rpx 0rpx !important;
		}

		/deep/.u-label {
			flex: 0 0 30px !important;
		}

		/deep/button {
			margin-top: 94rpx !important;
			margin-bottom: 30rpx;
		}

		/deep/.u-error-message {
			padding-left: 64rpx !important;
		}



	}
</style>